.pe-radio {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;

    .pe-radio-item {
        width: var(--pe-radio-font-size);
        height: var(--pe-radio-font-size);
        border-radius: calc(var(--pe-radio-font-size) / 2);
        border: 1px solid var(--pe-color-border);
        margin-right: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .5s;
        position: relative;

        .pe-radio-cir {
            width: 4px;
            height: 4px;
            border-radius: 2px;
            transform: scale(0);
            transition: all .5s;
            background-color: var(--pe-color-white);
        }
    }

    .pe-radio-checked {
        background-color: var(--pe-color-primary);
        border-color: var(--pe-color-primary);

        .pe-radio-cir {
            transform: scale(1);
        }
    }
}

.pe-radio {
    --pe-radio-font-size: var(--pe-font-size-default);
    --pe-radio-text-color: var(--pe-color-text);
    --pe-radio-height: var(--pe-default-height);
}

.pe-radio-border {
    --pe-radio-border-color: var(--pe-color-border);
    --pe-radio-border-hover-color: var(--pe-color-primary);
    --pe-radio-border-padding: var(--pe-padding-default);
}

.pe-radio {
    font-size: var(--pe-radio-font-size);
    height: var(--pe-radio-height);
    cursor: pointer;
}

.pe-radio+.pe-radio {
    margin-left: var(--pe-margin-left);
}

.pe-radio-border {
    height: var(--pe-radio-height);
    padding: var(--pe-radio-border-padding);
    border: 1px solid var(--pe-radio-border-color);
    border-radius: var(--pe-border-radius);
    transition: var(--pe-all-transition);
    cursor: pointer;

    &:hover {
        border-color: var(--pe-radio-border-hover-color);
    }
}

.pe-radio-large {
    --pe-radio-font-size: var(--pe-font-size-large);
    --pe-radio-border-padding: var(--pe-padding-large);
    --pe-radio-height: var(--pe-large-height)
}

.pe-radio-small {
    --pe-radio-font-size: var(--pe-font-size-small);
    --pe-radio-border-padding: var(--pe-padding-small);
    --pe-radio-height: var(--pe-small-height)
}

.pe-radio-disabled {
    color: var(--pe-color-border);
    cursor: not-allowed;
    --pe-radio-border-hover-color: var(--pe-color-border);

    .pe-radio-checked {
        background-color: transparent;
        border-color: var(--pe-color-border);

        .pe-radio-cir {
            background-color: var(--pe-color-border);
            transform: scale(1);
        }
    }
}

.pe-radio-active {
    --pe-radio-border-color: var(--pe-color-primary)
}